<template>
	<div class="w-layout__container" :style="{'height':height}">
		<header class="w-layout__header" v-if="$slots.header">
			<slot name="header"></slot>
		</header>
		<main class="w-layout__body">
			<slot></slot>
		</main>
		<footer class="w-layout__footer" v-if="$slots.footer">
			<slot name="footer"></slot>
		</footer>
	</div>
</template>

<script>
	export default {
		name      : "WLayout",
		components: {},
		props     : {
			height: {
				type    : String,
				required: true
			}
		},
		data() {
			return {}
		},
		computed  : {},
		watch     : {},
		methods   : {},
	}
</script>

<style lang="scss" scoped>
	@import "~@/assets/css/_variables.scss";

	//父元素: { display: flex; }

	.w-layout__container {
		@include flex-column(flex-start);
		text-align: left;
		width: 100%;

		.w-layout__header {
			width: inherit;
		}

		.w-layout__body {
			@include flex-column(flex-start);
			@include flex-space();
			width: inherit;
			overflow: auto;
		}

		.w-layout__footer {
			width: inherit;
		}
	}
</style>
